@mixin cc-grid($width) {
	display: grid;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-template-columns: repeat(auto-fill, $width);
}

/* ==================
        flex布局
 ==================== */
.cc-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.cc-flex-col {
	display: flex;
	flex-direction: column;
}
.cc-items-center {
	align-items: center;
}
.cc-items-start {
	align-items: start;
}
.cc-justify-center {
	justify-content: center;
}
.cc-justify-between {
	justify-content: space-between;
}
.cc-justify-around {
	justify-content: space-around;
}
.cc-justify-end {
	justify-content: flex-end;
}
.cc-flex-1 {
	flex: 1;
}
.cc-flex-wrap {
	flex-wrap: wrap;
}

/* ==================
    margin padding: 内外边距
 ==================== */
@for $i from 0 through 300 {
	// 只要双数和能被5除尽的数
	@if $i % 2==0 or $i % 5==0 {
		// 得出：cc-margin-30或者cc-m-30
		.cc-margin-#{$i},
		.cc-m-#{$i} {
			margin: $i + rpx;
		}
		.cc-m-x-#{$i} {
			margin-left: $i + rpx;
			margin-right: $i + rpx;
		}
		.cc-m-y-#{$i} {
			margin-top: $i + rpx;
			margin-bottom: $i + rpx;
		}

		// 得出：cc-padding-30或者cc-p-30
		.cc-padding-#{$i},
		.cc-p-#{$i} {
			padding: $i + rpx;
		}
		.cc-p-x-#{$i} {
			padding-left: $i + rpx;
			padding-right: $i + rpx;
		}
		.cc-p-y-#{$i} {
			padding-top: $i + rpx;
			padding-bottom: $i + rpx;
		}

		.cc-gap-#{$i} {
			width: 100%;
			height: $i + rpx;
		}

		.cc-text-#{$i} {
			font-size: #{$i}rpx;
		}

		.cc-radius-#{$i} {
			border-radius: #{$i}rpx;
		}
		
		.cc-w-#{$i} {
			width: #{$i}rpx;
		}
		
		.cc-min-w-#{$i} {
			min-width: #{$i}rpx;
		}
		
		.cc-max-w-#{$i} {
			max-width: #{$i}rpx;
		}
		
		.cc-h-#{$i} {
			height: #{$i}rpx;
		}
		
		.cc-min-h-#{$i} {
			min-height: #{$i}rpx;
		}
		
		.cc-lh-#{$i} {
			line-height: #{$i}rpx;
		}

		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： cc-m-l-30
			// 定义外边距
			.cc-m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx;
			}

			// 定义内边距
			.cc-p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx;
			}

			// 定义外边距
			.cc-margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx;
			}

			// 定义内边距
			.cc-padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}

$weights: 500, 600;
@each $weight in $weights {
	.cc-text-#{$weight} {
		font-weight: #{$weight};
	}
}
/* ==================
    底部安全区域
 ==================== */
.cc-safe-bottom {
	padding-bottom: 0;
	padding-bottom: calc(constant(safe-area-inset-bottom));
	padding-bottom: calc(env(safe-area-inset-bottom));
}

/* ==================
        字体
 ==================== */
.cc-text-primary {
	color: $u-primary;
}
.cc-text-success {
	color: $u-success;
}
.cc-text-warning {
	color: $u-warning;
}
.cc-text-error {
	color: $u-error;
}
.cc-text-info {
	color: $u-tips-color;
}

/* ==================
        分割线
 ==================== */
.cc-divider-col {
	margin: 0 24rpx;
	width: 1rpx;
	height: 40%;
	background-color: $u-tips-color;
}

/* ==================
        底部action
 ==================== */
.cc-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	background-color: #fff;
	box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
}

/* ==================
        其他
 ==================== */
.cc-box-shadow {
	box-shadow: 0rpx 16rpx 24rpx 0 rgba(184, 184, 210, 0.1);
}
.cc-bg-white {
	background-color: #fff;
}
.cc-bg-gray {
	background-color: $u-color-gray;
}
.cc-split {
	width: 2rpx;
	height: 32rpx;
	border-radius: 2rpx;
	background-color: $u-tips-color;
	margin: 0 24rpx;
}
.cc-bg-picture {
	width: 100%;
	background-image: url('~@/static/image/page-bg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	pointer-events: none;
}
